<template>
    <div class="my_header">
    <div class="left">
    <van-icon name="wap-nav" size="22px"/>
    </div>
    <div class="content">
    <div :class="{active:currentTag === 1}" @click="handClick(1)">我的</div>
    <div :class="{active:currentTag === 2}" @click="handClick(2)">首页</div>
    <div :class="{active:currentTag === 3}" @click="handClick(3)">云村</div>
    <div :class="{active:currentTag === 4} "@click="handClick(4)">听书</div>
    </div>
    <div class="right">
    <van-icon name="search"size="22px"/>
    </div>
    </div>
    </template>
    <script setup>
    import {ref} from 'vue'
    import router from'@/router/index.js';
    let currentTag = ref(2)
    const handClick=(tag)=>{console.log(tag);
    currentTag.value =tag
    router.push({name:tag===1? 'mine':tag===2?'discover':tag===3?'yuncun':'video' })
    }
    </script>
    <style scoped>
    .my_header{
        display:flex;
    justify-content:space-between;
    }
    
    .my_header .content{
        display:flex;
    width: 180px;
    justify-content:space-around;
    }
    
    </style>